<template>
    <div>
        <div class="main-head flex-between container-fluid">
            <div class="title">
                <h1>{{$t('pro.ssp.sspList')}}</h1>
            </div>
        </div>
        <div class="content container-fluid">
            <div class="portlet">
                <div class="tools">
                    <a-button type="primary" @click="gotoSSPHandle(0)">{{$t('pro.public.buttonCreate')}} SSP</a-button>
                </div>
                <div class="table">
                    <a-spin :spinning="listInning">
                        <template v-if="!listInning && empty">
                            <a-empty
                                    image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original">
                                <span slot="description">{{$t('pro.ssp.empty')}}</span>
                            </a-empty>
                        </template>
                        <template v-if="!listInning && !empty">
                            <a-table
                                :rowKey="record => record.id"
                                :pagination="false"
                                :columns="columns"
                                :dataSource="sspList"
                                :loading="tableLoading"
                                :scroll="{ x: 1000 }">

                                <div slot="enable" slot-scope="text,row">
                                    {{ text }}
                                </div>

                                <div slot="ekey" slot-scope="text">
                                   {{text ? text : ' - '}}
                                </div>

                                <div slot="ikey" slot-scope="text">
                                    {{text ? text : ' - '}}
                                </div>

                                <div slot="isActive" slot-scope="text, row">
                                    <a-switch v-model="row.isActive" @change="active($event, row.id)"/>
                                </div>

                                <a :href="text" target="_blank" slot="url" slot-scope="text">{{ text }}</a>

                                <div slot="action" slot-scope="text,row">
                                    <a-icon style="margin-right: 8px" type="tool" class="cursor-pointer" @click="gotoSSPHandle(row.id)"/>
                                    <!--<a-icon type="delete" class="cursor-pointer" @click="deleteSSP(row.id)"/>-->
                                </div>
                            </a-table>

                            <!-- 分页 -->
                            <div class="public-page-box">
                                <a-pagination
                                    showSizeChanger
                                    showQuickJumper
                                    :pageSize.sync="pageParams.results"
                                    :total="pageParams.total"
                                    v-model="pageParams.page"
                                    @change="onShowSizeChange"
                                    @showSizeChange="onShowSizeChange"
                                />
                            </div>
                        </template>
                    </a-spin>

                </div>


            </div>
        </div>
    </div>
</template>

<script>
    import { getAllDataByPage, changeState } from '../../../api/SSP'


    export default {
        name: "SSPList",
        data() {
            return {
                empty: false,
                pageParams: {
                    page: 1,
                    results: 10,
                    total: 100
                },
                sspList: [],
                listInning: false,
                tableLoading: false,
            }
        },
        computed: {
            columns() {
                return this.$t('pro.ssp.columns')
            }
        },
        methods: {
            active(checked, id) {
                this.tableLoading = !this.tableLoading;
                setTimeout(()=> {
                    let params = {
                        status: checked,
                        id: id
                    };
                    changeState(params).then(res => {
                        let { code, data} = res.data;
                    
                        if (code == 200 && data) {
                            this.$message.success(this.$t('pro.Editcampaigns.operationSuccess'))
                        }else {
                            //如果失败状态改外原来的
                            let newData = this.sspList.map(data => {
                                if (data.id == id) {
                                    data.isActive = !checked;
                                }
                                return data;
                            });
                            this.sspList = newData
                        }
                    }).finally(() => {
                        this.tableLoading = !this.tableLoading;
                    });
                }, 800)
            },
            initTable() {
                this.listInning = true;
                getAllDataByPage(this.pageParams).then(res => {
                    
                    let { code, data } = res.data;
                   
                    if (code == 200 && data && data.records.length>0) {
                        this.empty = false;
                        this.sspList = data.records || [];
                        console.log(this.sspList);
                        
                        this.pageParams.total = data.total
                    }else {
                        this.empty = true;
                    }
                }).catch(() => {
                    this.empty = true;
                })
                .finally(() => {
                    this.listInning = false;
                })
            },

            gotoSSPHandle(id = 0) {
                this.$router.push({ path: '/admin/ssp/add/'+id })
            },

            deleteSSP(id) {
                console.log(id);
            },

            onShowSizeChange() {
                this.initTable()
            }

        },

        created() {
            this.initTable();
        },
    }
</script>

<style scoped lang="less">


</style>
